<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的网页</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
<header>
  <h1>欢迎来到我的网页</h1>
  <nav>
    <ul>
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero">
    <h2>CSS的基本语法</h2>
    <button class="cta-button">了解更多</button>
  </section>

  <section class="content">
    <div class="card">
      <h3>内联样式</h3>
      <p>内联样式是直接在HTML元素的<code>style</code>属性中定义的CSS样式，这种方式简单快捷，但不利于代码的重用和维护，适用于对单个元素进行快速样式调整。
      </p>
    </div>
    <div class="card">
      <h3>内部样式表</h3>
      <p>内部样式表是将CSS样式定义在HTML文档的&lt;head&gt;部分，通过&lt;style&gt;标签定义CSS样式，这种方式适用于对整个页面进行样式调整，但不如外部样式表灵活。</p>
    </div>
    <div class="card">
      <h3>外部样式表</h3>
      <p>外部样式表是将CSS代码放在一个单独的<code>.css</code>文件中，然后在HTML文件中通过&lt;link&gt;标签引入，这种方式实现了样式与内容的完全分离，提高了代码的可维护性和重用性，适用于大型项目。</p>
    </div>

  </section>
</main>

<footer>
  <p>&copy; 2024 我的网页. 保留所有权利。</p>
</footer>
</body>
</html>